<template>
  <el-table :data="tableData" style="width: 100%" class="custom-table-border">
    <el-table-column label="注册时间" width="220" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="用户名" width="180">
      <template #default="scope">
        <el-tag>{{ scope.row.username }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="性别" width="180">
      <template #default="scope">
        <el-tag>{{ scope.row.sex }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="电话" width="180" align="center">
      <template #default="scope">
        <el-tag>{{ scope.row.phone }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="地址" width="180" align="center">
      <template #default="scope">

        <el-tag>{{ scope.row.address }}</el-tag>

      </template>
    </el-table-column>

    <el-table-column label="操作" width="260" align="center">
      <template #default="scope">
        <el-button size="small"  @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-if="true" v-model="dialogFormVisible" title="编辑信息" width="500">
    <el-form :model="form">
      <el-form-item label="用户名:" >
        <el-input disabled v-model="form.username" autocomplete="off" />
      </el-form-item>

      <el-form-item label="性别:" >
        <el-input disabled v-model="form.sex" autocomplete="off" />
      </el-form-item>

      <el-form-item label="电话:" >
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>

      <el-form-item label="地址:" >
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upData">
          更新
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {Timer, User} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { onBeforeMount, onMounted } from "vue";
import axios  from "axios";
import {ElMessage} from "element-plus";
// import router from "@/router";

interface User {
  create_time: string
  // name: string
  username :string
  sex: string
  phone:string
  address: string
}

const dialogFormVisible = ref(false)
const upData = () => {

  ElMessage.success(form.address)
  ElMessage.success(form.username)
  axios.get("http://localhost:8090/updateUserInfo/"+form.username+"/"+form.phone+"/"+form.address).then((response) => {
    console.log(response.data)
  })

  dialogFormVisible.value = true
  // router.push("/alltheinfo")
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
  dialogFormVisible.value = true
  form.username = row.username
  form.sex =row.sex
  form.phone = row.phone
  form.address= row.address
  // dialogFormVisible =ref(true)
  // alert(dialogFormVisible.value)
  // alert(row.username)
}
const handleDelete = (index: number, row: User) => {
  console.log(row.username)
  axios.post("http://localhost:8090/deleteUser/" + row.username + "").then((response) => {
    console.log(response.data)
    if (response.data == "delete") {
      ElMessage.success("delete")
    }
  })
}

const tableData: User[] = reactive([
  {
    create_time: '2016-05-03',
    username: 'Tom',
    sex:'男',
    phone:'1111111111111',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    create_time: '2016-05-03',
    username: 'Tom2',
    sex:'男',
    phone:'2222222222222',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    create_time: '2016-05-03',
    username: 'Tom3',
    sex:'男',
    phone:'3333333333333',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    create_time: '2016-05-03',
    username: 'Tom5',
    sex:'男',
    phone:'5555555555555',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    create_time: '2016-05-03',
    username: 'Tom6',
    sex:'男',
    phone:'666666666666',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    create_time: '2016-05-03',
    username: 'Tom7',
    sex:'男',
    phone:'777777777777',
    address: 'No. 189, Grove St, Los Angeles',
  },
])


const form = reactive({
  create_time:'',
  username: '',
  phone: '',
  sex:'',
  address: '',

})


onBeforeMount(()=>{

  axios.get("http://localhost:8090/getAllUser/").then((res)=>{
    const res2 = res.data

    const newTableData: User[] = reactive([]);
    res2.forEach(() => {
      newTableData.push({
        create_time: '',
        username: '',
        phone: '',
        sex: '',
        address: '',
      });
    });
    tableData.splice(0, tableData.length,...newTableData);

    res2.forEach((item,index) => {
      console.log(item)
      console.log(index)
      tableData[index].username=item.username
      tableData[index].create_time=item.createTime
      tableData[index].phone=item.phone
      tableData[index].sex=item.sex
      tableData[index].address=item.adr


    })

  })

})

</script>
<style>

.custom-table-border {
  border-radius: 10px;
  border: 3px solid #ffe6f2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 添加一个水平和垂直方向偏移量都为 0，模糊半径为 5px，颜色透明度为 0.1 的阴影效果 */
}
</style>